<template>
  <view>
    <div class="back_img">
      <div class="me">我的</div>
      <div class="user_font" @click="tar_collect()">
        <div class="user_img">
          <image :src="imgs + info.img"></image>
        </div>
        <div class="user_name" >
          <div class="user_nameb">{{ info.nickname }}</div>
          <div class="user_namebs">推荐人：无</div>
        </div>
      </div>
      <div class="fonts">
        <div class="expert">旅游达人</div>
        <text>畅行一路通，出游最轻松。</text>
      </div>
    </div>
    <div class="list_box">
      <div class="list_content" @click="nulls">
        <image :src="imageBaseUrl + '/img/eye.png'" alt="" />
        <div class="list_contentb">浏览记录</div>
      </div>
      <div class="list_content" @click="nulls">
        <image :src="imageBaseUrl + '/img/gift.png'" alt="" />
        <div class="list_contentb">我的奖品</div>
      </div>
      <div class="list_content" @click="ord_forem">
        <image :src="imageBaseUrl + '/img/task.png'" alt="" />
        <div class="list_contentb">我的订单</div>
      </div>
      <div class="list_content" @click="nulls">
        <image :src="imageBaseUrl + '/img/book.png'" alt="" />
        <div class="list_contentb">推广信息</div>
      </div>
      <div class="list_content" @click="nulls">
        <image :src="imageBaseUrl + '/img/QR_code.png'" alt="" />
        <div class="list_contentb">推广码</div>
      </div>
    </div>
    <div class="timi_box">
      <div class="timi_content" @click="nulls">
        <div class="me_timi">
          <div class="me_timib">我的团队</div>
          <text>0</text>
        </div>
        <image :src="imageBaseUrl + '/img/addition.png'" alt="" />
      </div>
      <div class="timi_content" @click="nulls">
        <div class="me_timi">
          <div class="me_timib">收益</div>
          <text>0</text>
        </div>
        <image :src="imageBaseUrl + '/img/get_money.png'" alt="" />
      </div>
    </div>
    <div class="services" @click="nulls">
      <div class="else">其他服务</div>
      <div class="list_boxs">
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/collect.png'" alt="" />
          <div class="list_contentsb">收藏记录</div>
        </div>
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/praise.png'" alt="" />
          <div class="list_contentsb">点赞记录</div>
        </div>
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/service.png'" alt="" />
          <div class="list_contentsb">在线客服</div>
        </div>
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/check.png'" alt="" />
          <div class="list_contentsb">实名认证</div>
        </div>
      </div>
      <div class="list_boxs">
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/subtract.png'" alt="" />
          <div class="list_contentsb">收藏记录</div>
        </div>
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/money.png'" alt="" />
          <div class="list_contentsb">待付款</div>
        </div>
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/card.png'" alt="" />
          <div class="list_contentsb">已退款</div>
        </div>
        <div class="list_contents">
          <image :src="imageBaseUrl + '/img/letter.png'" alt="" />
          <div class="list_contentsb">待评论</div>
        </div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="recommend">
      <div class="recommend_text">我的攻略</div>
      <div class="more">
        <div class="more_text">更多</div>
        <div class="more_img">
          <image :src="imageBaseUrl + '/img/right.png'" alt="" />
        </div>
      </div>
    </div>
    <!-- 瀑布流组件 - 攻略部分 -->
    <uv-waterfall ref="guideWaterfallRef" v-model="list" :add-time="1" :left-gap="leftGap" :right-gap="rightGap"
      :column-gap="0" @changeList="changeList">
      <!-- 第一列数据 -->
      <template v-slot:list1>
        <view>
          <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @click="nulls">
            <view class="item-image-container">
              <image :src="item.image" mode="widthFix" class="item-image" @load="onImageLoad(item, $event)"
                :style="item.customStyle || ''" />
            </view>
            <view class="item-content">
              <view class="single_text">{{ item.title }}</view>
              <view class="single_score">
                <view class="mark">
                  <image class="imgs" :src="item.avatar" alt="" />
                  <view class="discuss">{{ item.name }}</view>
                </view>
                <view class="like">
                  <view class="like_img">
                    <image :src="imageBaseUrl + '/img/heart.png'" alt="" />
                  </view>
                  <view class="like_num">{{ item.collect_num }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 第二列数据 -->
      <template v-slot:list2>
        <view>
          <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @click="nulls">
            <view class="item-image-container">
              <image :src="item.image" mode="widthFix" class="item-image" @load="onImageLoad(item, $event)"
                :style="item.customStyle || ''" />
            </view>
            <view class="item-content">
              <view class="single_text">{{ item.title }}</view>
              <view class="single_score">
                <view class="mark">
                  <image class="imgs" :src="item.avatar" alt="" />
                  <view class="discuss">{{ item.name }}</view>
                </view>
                <view class="like">
                  <view class="like_img">
                    <image :src="imageBaseUrl + '/img/heart.png'" alt="" />
                  </view>
                  <view class="like_num">{{ item.collect_num }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-waterfall>

    <view class="nulls">没有更多了~</view>
    <div class="navigation_bar">
      <div class="navigation" @click="home">
        <div class="navigation_img">
          <image :src="imageBaseUrl + '/img/house.png'" alt="" />
        </div>
        <div class="navigation_text active">首页</div>
      </div>
      <div class="navigation">
        <div class="navigation_img">
          <image :src="imageBaseUrl + '/img/flower.png'" alt="" />
        </div>
        <div class="navigation_text">攻略</div>
      </div>
      <div class="navigation">
        <div class="navigation_imgs">
          <image :src="imageBaseUrl + '/img/aircraft.png'" :class="{ fly: a }" alt="" @click="take_off()" />
        </div>
        <div class="navigation_img">
          <image :src="imageBaseUrl + '/img/aircraft.png'" alt="" />
        </div>
        <div class="navigation_text">发布</div>
      </div>
      <div class="navigation">
        <div class="navigation_img">
          <image :src="imageBaseUrl + '/img/tree.png'" alt="" />
        </div>
        <div class="navigation_text">排行榜</div>
      </div>
      <div class="navigation" @click="my">
        <div class="navigation_img">
          <image :src="imageBaseUrl + '/img/meRed.png'" alt="" />
        </div>
        <div class="navigation_text" style="color: red">我的</div>
      </div>
    </div>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, onUnmounted, reactive, toRefs } from "vue";
import api from "../../api/scenic/index.js";//api接口
import config from '../../config/index.js';//配置文件
const imgs = config.baseUrl;//接口域名                        
const imageBaseUrl = config.image;//图片
const list = ref([])// 修改：使用 ref 初始化数据
const datas = ref({ list1: [], list2: [] }) // 修改：数据结构改为对象
const list1 = ref([])// 修改：使用 ref 初始化数据
const list2 = ref([])//  修改：使用 ref 初始化数据
const info = ref({})//用户信息
// 记录图片实际加载尺寸
const imageSizes = ref({})
// 计算图片样式
const imageStyle = computed(() => {
  return (item) => {
    if (!item.w || !item.h) return {};

    // 获取屏幕宽度并计算列宽
    const screenWidth = uni.getSystemInfoSync().windowWidth
    const columnWidth = (screenWidth - leftGap.value - rightGap.value - columnGap.value) / 2

    // 根据图片原始宽高比计算显示高度
    const ratio = item.h / item.w
    const displayHeight = columnWidth * ratio

    return {
      width: columnWidth + 'px',
      height: displayHeight + 'px'
    }
  }
})
//订单
const ord_forem = () => {
  uni.navigateTo({
    url: "/pages/indent/indent",
  });
}//点击事件
const nulls = () => {
  uni.showToast({
    title: '待开发至中......',
    icon: 'none'
  });
}
const tar_collect = () => {
  uni.navigateTo({
    url: "/pages/information/information",
  });
}
// 图片加载完成事件处理
const onImageLoad = (item, event) => {
  // 获取图片的原始宽度和高度
  const { width, height } = event.detail || { width: 300, height: 200 } // 添加默认值

  // 保存图片尺寸信息
  imageSizes.value[item.id] = { width, height }

  // 更新图片样式
  const screenWidth = uni.getSystemInfoSync().windowWidth
  const columnWidth = (screenWidth - leftGap.value - rightGap.value - columnGap.value) / 2
  const ratio = height / width
  const displayHeight = columnWidth * ratio

  // 更新数据中的样式信息
  item.customStyle = `width: ${columnWidth}px; height: ${displayHeight}px;`

  // 通知瀑布流组件重新计算布局
  nextTick(() => {
    // 根据不同瀑布流组件调用刷新
    if (item.source === 'scenic') {
      if (scenicWaterfallRef.value && scenicWaterfallRef.value.refresh) {
        scenicWaterfallRef.value.refresh()
      }
    } else {
      if (guideWaterfallRef.value && guideWaterfallRef.value.refresh) {
        guideWaterfallRef.value.refresh()
      }
    }
  })
}
//  点击事件
const home = () => {

  uni.redirectTo({
    url: '/pages/home/home'
  });
};
// 数据格式转换
const transformData = (item) => {
  // 使用接口真实宽高或生成随机宽高比
  // 如果接口返回了图片尺寸，使用接口数据
  // 如果没有，生成随机比例(0.6-1.2)以确保错落有致
  const originalWidth = item.width || 300
  const originalHeight = item.height || originalWidth * (Math.random() * 0.6 + 0.6) // 随机高度比

  return {
    id: item.id,
    image: `${imgs}${item.img}`,
    avatar: `${imgs}${item.avatar}`,
    name: item.name,
    collect_num: item.collect_num,
    w: originalWidth,
    h: originalHeight,
    title: item.title,
    desc: item.introduce,
    // 初始时使用默认样式，图片加载后会更新
    customStyle: ''
  }
}
onMounted(() => {
  //  获取用户信息
  console.log(uni.getStorageSync('token'))
  info.value = uni.getStorageSync('token')
  api.strategy({ scenic_id: 3 }).then((res) => {
    // 处理后的数据
    const processedData = res.data.map((item) => ({
      ...transformData(item),
      source: 'guide'
    }));

    // 拆分数据到两列（奇偶索引）
    list1.value = processedData.filter((_, index) => index % 2 === 0);
    list2.value = processedData.filter((_, index) => index % 2 !== 0);
  });
});
</script>


<style scoped lang="scss">
.user_name {
  font-size: 15px;
  margin-left: 20px;
}

.user_namebs {
  font-size: 15px;
  color: #505050;
  margin-top: 10px;
}

.user_img {
  width: 60px;
  margin-left: 20px;
  height: 60px;
  border-radius: 30px;
  overflow: hidden;
}

.user_img image {
  width: 100%;
  height: 100%;
}

.fly {
  transform: translateY(-1050px);
  transition: 3s;
}

.all {
  width: 98%;
  margin-left: 1%;
  margin-top: 5px;
  column-count: 2;
  column-gap: 0;
}

.single {
  width: 96%;
  break-inside: avoid;
  background-color: white;
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.single_img img {
  width: 100%;
}

.single_img {
  width: 100%;
}

.single_text {
  font-size: 15px;
  margin-left: 0px;
  color: #2f3030;
}

.mark {
  display: flex;
}

.single_score {
  display: flex;
  margin-top: 2px;
  line-height: 30px;
  justify-content: space-between;
  font-size: 12px;
  color: #8d8f92;
}

.line {
  width: 1px;
  height: 13px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 8px;
  background-color: #8d8f92;
}

.like {
  display: flex;
  margin-right: 5px;
}

.like_img {
  margin-top: 2px;
  margin-right: 5px;
}

.nulls {
  width: 100%;
  height: 120px;
  line-height: 80px;
  font-size: 14px;
  color: #626365;
  text-align: center;
}

.navigation_bar {
  width: 100%;
  background-color: white;
  height: 50px;
  display: flex;
  position: sticky;
  bottom: 0;
}

.navigation {
  width: 20%;
  text-align: center;
  font-size: 12px;
}

.navigation_img {
  width: 100%;
}

.navigation_imgs {
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: white;
  bottom: 50rpx;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 110;
}

.navigation_imgs image {
  width: 60rpx;
  height: 60rpx;
}

.imgs {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-radius: 15px;
}

.fly {
  transform: translateY(-1050px);
  transition: 3s;
}

.navigation_img image {
  width: 20px;
  height: 20px;
  margin-top: 5px;
}

.more_text {
  font-size: 13px;
  line-height: 19px;
  margin-left: 5px;
  color: #626365;
}

.more {
  background-color: white;
  position: absolute;
  right: 10px;
  height: 19px;
  display: flex;
  width: 50px;
  margin-top: 3px;
  border-radius: 19px;
}

.more_img {
  margin-top: 2px;
}

.more_img image {
  width: 15px;
  height: 15px;
  margin-top: -5px;
}

.recommend {
  width: 100%;
  height: 25px;
  position: relative;
  background-color: #e2eefd;
  margin-top: 5px;
  margin-bottom: 10px;
  display: flex;
  background-color: white;
}

.recommend_img {
  margin-left: 5px;
}

.recommend_img img {
  height: 20px;
  margin-top: 2.5px;
}

.recommend_text {
  font-size: 13px;
  line-height: 25px;
  margin-left: 5px;
  color: #626365;
}

.back_img {
  background-image: url(http://lxj.skych.top//img/girl.jpg);
  width: 100%;
  height: 357px;
  margin-top: 30px;
  background-size: cover;
  background-position: center;
}

.me {
  color: #505050;
  text-align: center;
  font-weight: 700;
  line-height: 2;
}

.user_font {
  margin-top: 36px;
  display: flex;
}



.fonts {
  width: 50%;
  margin-top: 24%;
  height: 50px;
  margin-left: 7%;
}

.expert {
  color: rgba(0, 0, 0, 1);
  font-size: 19px;
}

.fonts text {
  font-size: 12px;
  color: #6a6a6a;
}

.list_box {
  width: 100%;
  display: flex;
  height: 72px;
  background-color: #ffffff;
  justify-content: space-evenly;
}

.list_content {
  width: 18%;
  height: 64px;
  margin-top: 2px;
}

.list_content image {
  width: 58%;
  height: 40px;
  margin-left: 16px;
}

.list_contentb {
  font-size: 13px;
  text-align: center;
  margin-top: 3px;
  color: #505050;
}

.timi_box {
  width: 100%;
  display: flex;
  margin-top: 2px;
  height: 78px;
  align-items: center;
  justify-content: space-around;
}

.timi_content {
  width: 46%;
  border-radius: 7px;
  height: 70px;
  display: flex;
  background-color: #ffffff;
}

.me_timi {
  width: 50%;
  height: 70px;
}

.me_timib {
  font-weight: 550;
  color: #505050;
  line-height: 2;
  text-align: center;
}

.me_timi text {
  font-weight: 550;
  color: #505050;
  margin-left: 42px;
  font-size: 20px;
}

.timi_content image {
  width: 53px;
  height: 55px;
  margin-left: 14px;
  margin-top: 5px;
}

.services {
  width: 96%;
  margin-left: 2%;
  border-radius: 4px;
  margin-top: 3px;
  background-color: #ffffff;
}

.else {
  color: #505050;
  margin-left: 6px;
  font-weight: 600;
  line-height: 2.5;
}

.list_boxs {
  width: 100%;
  display: flex;
  height: 72px;
  justify-content: space-around;
}

.list_contents {
  width: 18%;
  height: 64px;
  margin-top: 2px;
}

.list_contents image {
  width: 25px;
  height: 26px;
  margin-left: 20px;
}

.list_contentsb {
  font-size: 13px;
  text-align: center;
  margin-top: 3px;
  color: #505050;
}

/* 瀑布流卡片样式 - 关键修改部分 */
.waterfall-item {
  background-color: white;
  border-radius: 16rpx;
  width: 94%;
  margin-left: 2%;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.item-image-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.item-image {
  width: 100%;
  display: block;
  /* 消除图片底部间隙 */
}


.single_text {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 15rpx;
  line-height: 1.4;
  margin-top: 5px;
  margin-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
}

.single_score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.mark {
  display: flex;
  align-items: center;
  margin-left: 5px;
  margin-bottom: 5px;
}

.imgs {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  margin-right: 10rpx;
}

.like {
  display: flex;
  align-items: center;
  margin-right: 5px;
  margin-bottom: 5px;
}

.like_img image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 8rpx;
}

.nulls {
  text-align: center;
  padding: 60rpx 0;
  font-size: 26rpx;
  color: #999;
}
</style>